<template>
  <view class="tab-bar">
    <view class="tab-item" @tap="nav(item.nav)" v-for="(item, index) in tabType==='user'?userTabBar:riderTabBar" :key="item.nav">
    	<view class="num" v-if="item.id==2&&cartNum!=0&&tabType==='user'"> {{cartNum}} </view>
    	<image :src="currentPage==item.id?item.selectIcon:item.icon" class="t-img"/>
    	<view class="tab-text" :class="currentPage==item.id?'a-tab-text':''"> {{item.text}} </view>
    </view>
    <view class="add" @tap="goReleaseGoods" v-if="isShop&&tabType==='user'"></view>
  </view>
</template>

<script setup>
	import { computed } from 'vue';
  import { onReady } from '@dcloudio/uni-app'
	import { useUserStore, useCartStore } from '@/store/index.js'
	const props = defineProps({
		currentPage: { // 当前所在的页面
			type: Number,
			default: 0
		},
		tabType: {
			type: String,
			default: 'user'
		}
	})
	const isShop = computed(() => {
		const { userInfo } = useUserStore()
		return userInfo.is_shop == 1
	})
	const cartNum = computed(() => {
		const { cartNum } = useCartStore()
		return cartNum
	})
	const userTabBar = computed(() => {
    const arr = [
		{ id: 0, text: '首页', icon: '/static/tabIcon/home.png', selectIcon: '/static/tabIcon/a_home.png', nav: '/pages/index/index' },
		{ id: 1, text: '消息', icon: '/static/tabIcon/message.png', selectIcon: '/static/tabIcon/a_message.png', nav: '/pages/message/message' },
		{id: 2, text: '购物车', icon: '/static/tabIcon/cart.png', selectIcon: '/static/tabIcon/a_cart.png', nav: '/pages/shopCart/shopCart' },
		{id: 3, text: '我的', icon: '/static/tabIcon/mine.png', selectIcon: '/static/tabIcon/a_mine.png', nav: '/pages/mine/mine' }
	]
    if(isShop.value) arr.splice(2, 0, {})
    return arr
  })
  // 骑手导航
	const riderTabBar = [
		{ id: 0, text: '首页', icon: '/static/tabIcon/rider_home.png', selectIcon: '/static/tabIcon/a_home.png', nav: '/pages/riderPages/riderHome/riderHome' },
		{ id: 1, text: '订单', icon: '/static/tabIcon/order.png', selectIcon: '/static/tabIcon/a_order.png', nav: '/pages/riderPages/riderOrder/riderOrder' },
		{ id: 2, text: '已完成', icon: '/static/tabIcon/success.png', selectIcon: '/static/tabIcon/a_success.png', nav: '/pages/riderPages/riderComplete/riderComplete' },
		{ id: 3, text: '我的', icon: '/static/tabIcon/rider_mine.png', selectIcon: '/static/tabIcon/a_rider_mine.png', nav: '/pages/riderPages/riderMine/riderMine' },
	]
  const nav = (url) => {
    if(!url) return
    if(url === '/pages/message/message') return getApp().globalData.toast('暂未开放')
    if(props.tabType === 'user') uni.switchTab({ url })
    else uni.redirectTo({ url })
  }
	const goReleaseGoods = () => {
		uni.navigateTo({
			url: '/pages/shopPages/releaseGoods/releaseGoods'
		})
	}
</script>

<style lang="scss" scoped>
  .tab-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    padding-bottom: constant(safe-area-inset-bottom);
    padding-bottom: env(safe-area-inset-bottom);
    display: flex;
    background-color: #FFFFFF;
    justify-content: space-evenly;
    box-shadow: 0px -1px 1px 0px rgba(223,223,223,0.3);
    .tab-item {
    	flex: 1;
      height: 50px;
    	display: flex;
    	align-items: center;
    	flex-direction: column;
    	justify-content: center;
      position: relative;
    	.t-img {
    		width: 24px;
    		height: 24px;
    	}
    	.tab-text {
    		color: #333333;
    		font-size: 11px;
    		font-weight: 400;
    		line-height: 15px;
    		&.a-tab-text {
    			color: #FF3B1E;
    		}
    	}
      .num {
      	position: absolute;
      	top: 0;
      	right: 0;
      	transform: translateX(-50%);
      	width: 16px;
      	height: 16px;
      	display: flex;
      	align-items: center;
      	justify-content: center;
      	color: #FFFFFF;
      	font-size: 12px;
      	font-weight: 500;
      	border-radius: 50%;
      	background: #F53F3F;
      }
    }
    .add {
    	position: absolute;
    	left: 50%;
    	top: 0;
    	transform: translate(-50%, -30%);
    	width: 49px;
    	height: 49px;
    	border-radius: 50%;
    	background-color: #FF3B1E;
    	border: #FFFFFF 6px solid;
    	&::after, &::before {
    		position: absolute;
    		top: 50%;
    		left: 50%;
    		transform: translate(-50%, -50%);
    		display: block;
    		content: '';
    		width: 17px;
    		height: 3px;
    		background: #FFFFFF;
    		border-radius: 34px;
    	}
    	&::before {
    		width: 3px;
    		height: 17px;
    	}
    }
  }
</style>